<template>
  <div class="mainWrap">
    <!-- 登录按钮 -->
    <div class="loginBtn" @click="showLoginFn">登录</div>

    <div v-show="isShow" style="width: 80%; margin: 0 auto">
      <van-field v-model="username" placeholder="请输入用户名" />
      <van-field v-model="password" type="password" placeholder="请输入密码" />
      <van-button
        type="primary"
        style="width: 40%; margin: 1rem auto"
        @click="enterLoginFn"
        >确定
      </van-button>
      <van-button
        type="primary"
        style="width: 40%; margin: 1rem auto"
        @click="cancelLoginFn"
        >取消
      </van-button>
    </div>

    <!-- 尾部footer栏 -->
    <footerWrap></footerWrap>
  </div>
</template>

<script>
import footerWrap from "./footerWrap";
import { Dialog } from "vant";
export default {
  name: "loginWrap",
  data() {
    return {
      msg: "登录页",
      isShow: false,
      username: "",
      password: "",
    };
  },
  components: { footerWrap },
  created() {
    let _u = localStorage.getItem("u_name");
    let _p = localStorage.getItem("u_password");
    if (_u !== null && _p !== null) {
      // this.loginState = "已登录";
      this.$router.push({
        path: "/userCenter",
      });
    }
  },
  methods: {
    showLoginFn() {
      this.isShow = true;
    },
    enterLoginFn() {
      if (this.username === "" || this.password === "") {
        Dialog({ message: "请输入用户名和密码" });
        return false;
      } else {
        Dialog.alert({
          message: "登录成功",
        }).then(() => {
          localStorage.setItem("u_name", this.username);
          localStorage.setItem("u_password", this.password);
          this.$router.push({
            path: "/userCenter",
          });
        });
      }
    },
    cancelLoginFn() {
      this.isShow = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btnSty {
  font-size: 0.5rem;
  padding: 0.5rem;
}
.mainWrap {
  position: relative;
  padding-top: 185px;
}
.toTop {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
}
.loginBtn {
  width: 3rem;
  height: 3rem;
  background: #f00;
  margin: 2rem auto;
  font-size: 0.8rem;
  color: #fff;
  line-height: 3rem;
  text-align: center;
  border-radius: 100%;
}
</style>
